<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>react中的事件处理</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.js"></script>
		<!-- 引入babel，用于解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="root"></div>
		<input type="text" id="nativeInpt">

		<script type="text/babel">
		/* 
			1.	通过onXxx属性指定事件处理函数(注意大小写)
							(1).React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 ———— 为了更好的兼容性
							(2).React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) —————— 高效

			2.	通过event.target得到发生事件的DOM元素对象 —— react中的event 和 原生事件中的event有所不同
			
			备注：事件机制：事件监听、事件回调的存储、事件触发、维护事件对象等等。
		*/
			//定义一个组件
			class Demo extends React.Component{
				render(){
					return (
						<div>
							<input ref="inpt1" type="text" placeholder="点击按钮提示输入"/>	&nbsp;
							<button onClick={this.showMsg}>点我提示左侧数据</button>&nbsp;
							<input ref="inpt2" type="text" onBlur={this.showMsg2} placeholder="失去焦点提示输入"/>	
						</div>
					)
				}
				showMsg = ()=>{
					alert(this.refs.inpt1.value)
				}
				showMsg2 = (event)=>{
					console.log('react中的事件对象',event)
					alert(this.refs.inpt2.value)
				}
			}
			//渲染组件到页面
			ReactDOM.render(<Demo/>,document.getElementById('root'))

			const nativeInpt = document.getElementById('nativeInpt')
			nativeInpt.addEventListener('blur',(event)=>{
				console.log('原生事件的event',event)
			})
		</script>
	</body>
</html>